<template>
    <div class="allContainer">
        <div class="navBar">
            <div class="back" @click="goBack"></div>
            <div class="other">...</div>
        </div>
        <div class="userInfo">
            <div class="infoContent">
                <div class="userImg"></div>
                <div class="info">
                    <p class="name">{{ user.name }}</p>
                    <p class="time">{{ user.createTime }}</p>
                </div>
            </div>
            <div class="follow">
                <p>关注</p>
            </div>
        </div>
        <div class="sayImg">

        </div>
        <div class="sayContent">
            <div class="title">{{ user.title }}</div>
            <div class="content">
                {{ user.content }}
            </div>
        </div>
        <div class="comments">
            <div class="title">
                评论（{{ user.commentNum }}）
            </div>
            <van-empty description="暂无评论"  v-if="this.user.commentNum==0"/>
            <div class="comment" v-for="(comment,index) in comments" :key="index">
                <div class="commentUser">
                    <div class="userImg">

                    </div>
                    <div class="commentInfo">
                        <div class="name">
                            {{ comment.name }}
                        </div>
                        <div class="content">
                            {{ comment.comment }}
                        </div>
                        <div class="commentTime">
                            {{ comment.createTime }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tabBar">
            <div class="commentInput">
                <input type="text" v-model="commentInfo" placeholder="评论一下" @keyup.enter="handleSubmit">
            </div>
            <div class="likeContent">
                <div class="likeImg">

                </div>
                <div class="content">
                    {{ user.supportNum }}
                </div>
            </div>
            <div class="comment">
                <div class="commentImg">

                </div>
                <div class="content">
                    {{ user.commentNum }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Empty,Toast } from 'vant';
import axios from 'axios';
    export default{
        components:[Empty,Toast],
        data(){
            return{
                user:{},
                comments:[],
                commentInfo:'',
                forumId:this.$route.query.id
            }
        },
        async mounted(){
            await axios({
                url:`http://localhost:8080/polycystic/forum/detail/${this.forumId}`,
                method:'get',
                headers:{
                    token:localStorage.getItem('jwt')
                },
            }).then(res=>{
                this.user=res.data.data.userForumVO
                this.comments=res.data.data.userCommentVOList
            })
        },
        methods:{
            async getAllInfo(){
                await axios({
                    url:`http://localhost:8080/polycystic/forum/detail/${this.forumId}`,
                    method:'get',
                    headers:{
                        token:localStorage.getItem('jwt')
                    },
                }).then(res=>{
                    this.user=res.data.data.userForumVO
                    this.comments=res.data.data.userCommentVOList
                    console.log(res.data.data);
                })
            },
            goBack(){
                this.$router.replace({
                    name:'say'
                })
            },
            async handleSubmit(){
                if(this.commentInfo!==''){
                    await axios({
                        url:'http://localhost:8080/polycystic/forum/addComment',
                        method:'post',
                        headers:{
                            token:localStorage.getItem('jwt')
                        },
                        data:{
                            forumId:this.forumId,
                            comment:this.commentInfo
                        }
                    }).then(res=>{
                        if(res.status==200){
                            Toast.success('评论成功');
                        }
                    })
                    this.getAllInfo()
                }
                else{
                    Toast.fail('评论不能为空！');
                }
            }
        }
    }
</script>

<style scoped>
.allContainer{
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    scrollbar-width: none;
}
.navBar{
    margin-top: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navBar .back{
    background-image: url(../assets/img/6-icon@2x/back.png);
    width: .32rem;
    height: 0.32rem;
    background-position: center;
    background-size: contain;
    margin-left: 16px;
}
.navBar .other{
    font-family: 'PingFangSC-Regular';
    margin-right: 16px;
    color:#333333;
    font-size: 26px;
}
.userInfo{
    width: 343px;
    margin: 0 auto;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.userInfo .infoContent{
    display: flex;
    align-items: center;
}
.userInfo .infoContent .userImg{
    width: 50px;
    height: 50px;
    background-color: skyblue;
    border-radius: 50%;
}
.userInfo .infoContent .info{
    display: flex;
    flex-direction: column;
    font-family: 'PingFangSC-Regular';
    margin-left: 10px;
}
.userInfo .infoContent .info .name{
    color:#333333;
    font-size: 17px;
}
.userInfo .infoContent .info .time{
    color:#999999;
    font-size: 15px;
}
.userInfo .follow{
    font-size: 14px;
    font-family: 'PingFangSC-Mediuem';
    display: flex;
    align-items: center;
    justify-content: center;
    color:rgb(128,180,237);
    border: 1.5px solid rgb(128,180,237);
    border-radius: 15px;
}
.userInfo .follow p{
    margin-left: 10px;
    margin-right: 10px;
}
.sayImg{
    width: 343px;
    margin: 0 auto;
    margin-top: 15px;
    height: 260px;
    background-color:skyblue;
    border-radius: 15px;
}
.sayContent{
    width: 343px;
    margin: 0 auto;
    margin-top: 20px;
    border-bottom: 1px solid rgba(182, 182, 182,0.5);
    display: flex;
    flex-direction: column;
}
.sayContent .title{
    color:#333333;
    font-family: 'PingFangSC-Mediuem';
    font-size: 16px;
}
.sayContent .content{
    color:#333333;
    font-family: 'PingFangSC-Regular';
    margin-bottom: 15px;
    font-size: 15px;
    margin-top: 15px;
}
.comments{
    width: 343px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 100px;
}
.comments .title{
    color:#333333;
    font-family: 'PingFangSC-Mediuem';
    font-size: 16px;
    margin-bottom: 20px;
}
.comments .comment{
    width: 343px;
    margin: 0 auto;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.comments .comment .commentUser{
    display: flex;
    align-items: center;
}
.comments .comment .commentUser .userImg{
    width: 45px;
    height: 45px;
    background-color: skyblue;
    border-radius: 50%;
}
.comments .comment .commentUser .commentInfo{
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}
.comments .comment .commentUser .commentInfo .name{
    font-size: 14px;
    font-family: 'PingFangSC-Mediuem';
    color:#999999;
}
.comments .comment .commentUser .commentInfo .content{
    font-size: 15px;
    font-family: 'PingFangSC-Regular';
    color:#333333;
    margin-top: 2px;
}
.comments .comment .commentUser .commentInfo .commentTime{
    font-size: 13px;
    font-family: 'PingFangSC-Regular';
    color:#999999;
    margin-top: 2px;
}
.comments .comment .likeContainer{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.comments .comment .likeContainer .likeImg{
    background-image: url(../assets/img/tab+logo@2x/heart.png);
    background-position: center;
    background-size: contain;
    width: .4rem;
    height: .4rem;
}
.comments .comment .likeContainer .likeNum{
    font-size: 15px;
    color:#999999;
    margin-top: 5px;
}
.tabBar{
    position: fixed;
    width: 100%;
    background-color: #FFF;
    display: flex;
    align-items: center;
    left: 0;
    bottom: 0;
    height: 80px;
}
.tabBar .commentInput{
    display: flex;
    align-items: center;
    margin-left: 16px;
    width: 200px;
    background-color: rgb(246,248,250);
    border-radius: 20px;
}
.tabBar .commentInput input{
    border: none;
    border-radius: 20px;
    background-color: rgb(246,248,250);
    color:#999999;
    height: 40px;
    width: 160px;
    margin-left: 20px;
}
.tabBar .commentInput input::-webkit-input-placeholder{
    color:#999999;
	font-size: 15px;
}
.tabBar .likeContent{
    margin-left: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tabBar .comment{
    margin-left: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tabBar .likeContent .likeImg{
    background-image: url(../assets/img/tab+logo@2x/heart.png);
    background-position: center;
    background-size: contain;
    width: .6rem;
    height: .6rem;
}
.tabBar .likeContent .content{
    font-size: 15px;
    color:#999999;
    margin-top: 2px;
}
.tabBar .comment .commentImg{
    background-image: url(../assets/img/tab+logo@2x/message.png);
    background-position: center;
    background-size: contain;
    width: .6rem;
    height: .6rem;
}
.tabBar .comment .content{
    font-size: 15px;
    color:#999999;
    margin-top: 2px;
}
</style>